<template>
    <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index">
            <navigator :url="`/pages/goods/goods?id=${item.goods_id}`" hover-class="none">
                <image :src="item.original_img" mode="widthfix" />
                <div class="content">
                    <div class="p">
                        <div class="title">{{ item.goods_name }}</div>
                        <view class="other">
                            <view class="price"
                                >{{ item.new_price }}<text class="old_price">{{ item.old_price }}</text></view
                            >
                        </view>
                    </div>
                    <div class="btn">
                        <div class="vip">会员价￥{{item.vip_price}}</div>
                        <div class="buy">抢购</div>
                    </div>
                </div>
            </navigator>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: Array,
    },
};
</script>

<style lang="scss" scoped>
.list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 0;
    .item {
        width: 48%;
        margin-bottom: 20rpx;
        background: #fff;
        image {
            width: 98%;
            height: 340rpx;
        }
        .content {
            .p {
                padding: 20rpx 20rpx 0rpx 20rpx;
            }
            .title {
                width: 100%;
                font-size: 24rpx;
                color: #656364;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .btn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                line-height: 55rpx;
                font-size: 24rpx;
                color: #fff;
                .vip {
                    width: 70%;
					// height: 29px;
                    background: linear-gradient(90deg, #ff4848 0%, #ca0019 100%);
                }
                .buy {
                    width: 30%;
                    border: 1rpx solid #ca0019;
                    height: 53rpx;
                    color: #ca0019;
                }
            }
            .other {
                height: 60rpx;
                line-height: 60rpx;
                .price {
                    font-size: 34rpx;
                    color: #ff3000;
                    font-weight: 600;
                }
                .price::before {
                    content: "￥";
                    font-size: 24rpx;
                }
                .old_price {
                    font-size: 26rpx;
                    font-weight: 400;
                    text-decoration: line-through;
                    color: #c4c4c4;
                    margin-left: 10rpx;
                }
            }
        }
    }
}
</style>
